<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="员工姓名：" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="职位：">
        <el-input v-model="ruleForm.job" />
      </el-form-item>
      <el-form-item label="账号：" prop="account">
        <el-input v-model="ruleForm.account" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="ruleForm.password" show-passwor placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="编辑权限" prop="auth" class="authority">
        <el-tree
          ref="tree"
          :data="routes"
          show-checkbox
          node-key="id"
          :default-expanded-keys="keys"
        />
      </el-form-item>
    </el-form>
    <div>
      <el-button @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import { asyncRoutes } from "@/router/index";
import { addAuth, getAuthInfo } from "@/api/http/account";
const ERR_OK = 200;
const phoneValidate = (rule, value, callback) => {
  const isRight = /^1[3456789]\d{9}$/.test(value);
  if (!isRight) {
    return callback(new Error("请输入有效手机号码"));
  } else {
    callback();
  }
};
export default {
  props: {
    id: {
      type: [String, Number],
      default: ""
    },
    authInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      ruleForm: {
        name: "",
        phone: "",
        job: "",
        account: "",
        password: "",
        auth: null
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ trigger: "blur", validator: phoneValidate }],
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        auth: [{ required: true, message: "请选择权限", trigger: "blur" }]
      }
    };
  },
  computed: {
    routes() {
      const arr = [];
      for (let i = 0; i < asyncRoutes.length; i++) {
        const obj = asyncRoutes[i];
        if (!obj.meta) continue;
        if (obj.meta) {
          obj.label = obj.meta.title;
          obj.id = obj.meta.id;
        }
        if (obj.children && obj.id) {
          const obj_b = obj.children;
          for (let j = 0; j < obj_b.length; j++) {
            obj_b[j].label = obj_b[j].meta.title;
            obj_b[j].id = obj_b[j].meta.id;
          }
          obj.children = obj_b;
        }
        arr.push(obj);
      }
      console.log(arr, "arr");
      return arr;
    },
    keys() {
      const arr = [];
      for (let i = 0; i < asyncRoutes.length; i++) {
        const obj = asyncRoutes[i];
        if (obj.meta && obj.children) {
          for (let j = 0; j < obj.children.length; j++) {
            const obj_b = obj.children[j];
            arr.push(obj_b.id);
          }
        }
      }
      return arr;
    }
  },
  created() {
    if (this.$route.query.id) {
      this.ruleForm.admin_id = this.$route.query.id;
      this._getAuthInfo(this.$route.query.id);
    }
  },
  methods: {
    submit() {
      const adminArr = this.$refs.tree.getCheckedKeys();
      this.ruleForm.auth = adminArr.concat(
        this.$refs.tree.getHalfCheckedKeys()
      );
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this._addAuth(this.ruleForm).then(res => {
            if (res.code === ERR_OK) {
              this.$router.back();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    editAdmini() {
      // this.ruleForm.id = this.id
      // const adminArr = this.$refs.tree.getCheckedKeys()
      // this.ruleForm.auth_rule_sell = adminArr
    },
    getAllCheckKeys() {
      const arr = [];
      for (let i = 0; i < asyncRoutes.length; i++) {
        const item = asyncRoutes[i];
        arr.push(item.id);
        if (item.children) {
          const obj_child = item.children;
          for (let j = 0; j < obj_child.length; j++) {
            arr.push(obj_child[j].id);
          }
        }
      }
      return arr;
    },
    _addAuth({ admin_id, name, phone, job, account, password, auth }) {
      return addAuth({
        admin_id,
        name,
        phone,
        job,
        account,
        password,
        auth
      }).then(res => {
        if (res.code === ERR_OK) {
          if (res.code === ERR_OK) {
            this.$message({
              message: "操作成功",
              type: "success",
              showClose: true
            });
            return Promise.resolve(res);
          }
        }
      });
    },
    _getAuthInfo(admin_id) {
      getAuthInfo(admin_id).then(res => {
        if (res.code === ERR_OK) {
          console.log(res);
          this.ruleForm.name = res.data.name;
          this.ruleForm.phone = res.data.phone;
          this.ruleForm.job = res.data.job;
          this.ruleForm.account = res.data.account;
          this.ruleForm.password = res.data.password;
          this.ruleForm.auth = res.data.auth;
          if (res.data.auth.length) {
            this.$refs.tree.setCheckedKeys(res.data.auth);
          } else {
            this.$refs.tree.setCheckedKeys(this.getAllCheckKeys());
            this.ruleForm.auth = this.getAllCheckKeys();
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.el-input /deep/ .el-input__inner {
  width: 414px !important;
}
.el-tree {
  display: flex;
  justify-content: flex-start;
  margin-top: 40px;
  .el-tree-node {
    margin-right: 15px;
  }
}
.authority /deep/ .el-form-item__content {
  margin-left: 10px !important;
}
</style>
